<template>
  <div @click="tiaozhuan" class="shangjiamaincoll">
    <img :src="require('../assets/img/'+item.url)" alt />
    <h3>{{item.name}}</h3>
    <div>
      <span>⭐</span>
      <span>⭐</span>
      <span>⭐</span>
      <span>⭐</span>
      <span>⭐</span>
      <span class="shangjiamain">￥{{item.pingjun}}/人</span>
    </div>
    <div>{{item.dizhi}}</div>
  </div>
</template>

<script>
import "@/assets/font/iconfont.css";
export default {
  props: ["item"],
  components: {},
  methods:{
    tiaozhuan(){
      this.$router.push("/index/indexshangjia/"+this.item.id)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shangjiamaincoll{
  text-align: center;
  width: 24%;
  margin-right: 1.2%;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  line-height: 1.5rem;
  padding-bottom: 0.5rem;
  background-color: #f8f6f7;
}
.shangjiamaincoll:nth-child(4n){
  margin-right: 0px;
}
.shangjiamaincoll h3{
  margin: 0px;
  font-size:1.2rem;
  line-height: 2rem;
}
.shangjiamaincoll img{
  width: 100%;
}
.shangjiamain{
  color: #ff5757;
}
</style>
